<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品编辑</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <script src="/lib/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="/icheck-1.x/icheck.js"></script>
    <script src="/bootstrap-switch-master/dist/js/bootstrap-switch.js"></script>
    <link href="/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <link href="/icheck-1.x/skins/all.css" rel="stylesheet">
    <script src="/H-ui.admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script src="/H-ui.admin/lib/ueditor/1.4.3/ueditor.all.js"></script>
    <link href="/H-ui.admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" >
    <script src="/H-ui.admin/lib/webuploader/0.1.5/webuploader.js"></script>
</head>
<body>
<form action="{:url('goods.category/edit')}" class="form-horizontal" method="post" style="margin: 25px 50px">
    <input type="text" value="{$item?$item.id:''}" name="id" hidden>
    <div class="form-group">
        <label class="col-sm-2 control-label">分类名称</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="name"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">上一级</label>
        <div class="col-sm-8">
            <select class="form-control" name="parent_id">
                <option selected value="0">顶级</option>
                {foreach $items as $key  =>$value}
                <option value="{$value.id}">{$value.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">分类图标</label>
        <div class="col-sm-8">
            <div id="list1" class="uploader-list">
                {notempty name="$item.banner"}
                {foreach $item.banner as $value}
                <div class="file-item thumbnail">
                    <img src="{$value}" class="logoFromServer" style="display: inline-block;width:100px;">
                    <em class="close">×</em>
                </div>
                {/foreach}
                {/notempty}
            </div>
            <div id="logo">选择图片</div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">分类广告</label>
        <div class="col-sm-8">
            <div id="list2" class="uploader-list">
                {notempty name="$item.banner"}
                {foreach $item.banner as $value}
                <div class="file-item thumbnail">
                    <img src="{$value}" class="bannerFromServer" style="display: inline-block;width:100px;">
                    <em class="close">×</em>
                </div>
                {/foreach}
                {/notempty}
            </div>
            <div id="banner">选择图片</div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">分类描述</label>
        <div class="col-sm-8">
            <div id="editor" style="width: 100%;height: 300px" name="desc"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-4 control-label"></label>
        <div class="col-sm-2">
            <button type="submit" id="ctlBtn" class="btn btn-primary" style="float: left;">&emsp;提交&emsp;</button>
            <button type="button" class="btn btn-default" style="float: right;" onclick="history.back();">&emsp;返回&emsp;</button>
        </div>
    </div>
</form>
<script>
    var ue=UE.getEditor("editor");

    var logoArr=[];
    var uploader1 = WebUploader.create({
        auto:true,
        // swf文件路径
        swf: '/H-ui.admin/lib/webuploader/0.1.5/Uploader.swf',

        // 文件接收服务端。
        server: "{:url('Upload/uploadOne')}",

        //设置文件上传域的name
        //fileVal:"cover",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#logo',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize:false,

        //上传并发数。允许同时最大上传进程数
        threads:1,

        fileNumLimit:1,

        //fileSizeLimit:500,

        fileSingleSizeLimit:500*1024,
        dnd:"#list1",
        paste:"#list1",

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    uploader1.on("fileQueued",function (file) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img style="display: inline-block;width:100px">' +
            '<div class="info">' + file.name + '</div>' +
            '<em class="close">×</em>'+
            '</div>'

            ),
            $img = $li.find('img');

        $(".coverFromServer").remove();
        // $list为容器jQuery实例
        $("#list1").append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader1.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, 100, 100 );
    });
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader1.on( 'uploadSuccess', function( file,res ) {
        console.log(res);
        $( '#'+file.id ).addClass('upload-state-done');
        if(res.code==200){
            logoArr.push(res.url);

        }else{
            console.log(res.errmsg);
        }
    });

    // 文件上传失败，显示上传出错。
    uploader1.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    var bannerArr=[];
    var uploader2 = WebUploader.create({
        auto:true,
        // swf文件路径
        swf: '/H-ui.admin/lib/webuploader/0.1.5/Uploader.swf',

        // 文件接收服务端。
        server: "{:url('Upload/uploadOne')}",

        //设置文件上传域的name
        //fileVal:"banner",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#banner',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize:false,

        //上传并发数。允许同时最大上传进程数
        threads:4,

        fileNumLimit:6,

        //fileSizeLimit:500,

        fileSingleSizeLimit:500*1024,
        //dnd:"#list2",
        //paste:"#list2",
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    uploader2.on("fileQueued",function (file) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img style="display: inline-block;width:100px">' +
            '<em class="close">×</em>' +
            '</div>'
            ),
            $img = $li.find('img');


        // $list为容器jQuery实例
        $("#list2").append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader2.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, 100, 100 );
    });
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader2.on( 'uploadSuccess', function( file ,res) {
        console.log(res);
        $( '#'+file.id ).addClass('upload-state-done');
        if(res.code==200){
            bannerArr.push(res.url);
        }else{
            console.log(res.errmsg);
        }
    });

    // 文件上传失败，显示上传出错。
    uploader2.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    $("#ctlBtn").on("click",function (e) {
        e.preventDefault();
        var form=new FormData($("form").get(0));
        $(".logoFromServer").each(function (index) {
            logoArr.push($(this).attr("src"));
        });
        $(".bannerFromServer").each(function (index) {
            bannerArr.push($(this).attr("src"));
        });
        var logostr=logoArr[0];
        var bannerstr=bannerArr.toString();
        form.append("logo",logostr);
        form.append("banner",bannerstr);
        $.ajax({
            url:"{:url('goods.category/edit')}",
            type:"post",
            data:form,
            processData: false,  // 不处理数据
            contentType: false,   // 不设置内容类型
            success:function (res) {
                console.log(res);
            }
        })
    });

    $(".close").on("click",function (e) {
        $(this).parent().remove();
    });

</script>
</body>
</html>